<template>
  <!-- 新增部门的弹窗 -->
  <el-dialog :title="showTitle" :visible="showDialog" @close="handleCloseDialog">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="form.name"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="form.code"
          style="width: 80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="form.manager"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="form.introduce"
          style="width: 80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <div slot="footer">
      <el-button type="primary" size="small" @click="submit">确定</el-button>
      <el-button size="small" @click="handleCloseDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 获取员工简单列表
import { reqGetEmployeeSimple } from '@/api/employees'
// 新增部门
import { reqAdddepartMents, reqGetDepartDetail, reqPutDepartDetail } from '@/api/departments'
export default {
  name: 'AddDepts',
  props: {
    // 接收父亲传递过来的showDialog 是否显示弹框(取值布尔值)
    showDialog: {
      type: Boolean,
      default: false
    },
    // 接收父亲传递过来的nodeData数据,添加功能需要用到nodeData中的pid，后端需要知道给哪个部门添加
    nodeData: {
      type: Object,
      required: true
    },
    // 接收父组件传递过来的列表数据
    depts: {
      type: Array,
      required: true
    }
  },
  /**
*ruLe用的不多，仅作了解   *value-用户输入的值    *callback-必须要调用
校验通过的时候直接callback()  校验不通过的时候callback(new Error('xxx'))
*/
  data() {
    // 自定义校验 是否编码重复
    const validateCode = (rule, value, callback) => {
      // 编辑时 允许用户输入的值value和原本的编码nodeData.code一致放行
      if (this.form.id && this.nodeData.code === value) {
        callback()
        return
      }
      // 判断部门编码跟用户输入的值是否重复 重复了就返回重复提示
      const isRepeat = this.depts.some(item => item.code === value)
      isRepeat ? callback(new Error(`编码${value}重复了`)) : callback()
    }
    // 自定义校验 名字
    /* 1.难点-拿到父亲部门的孩子们(兄弟)
      nodeData 父亲数据节点  nodeData.id父亲的id
      depts数据列表数据  this.depts.filter(item =item.pid ==this.nodeData.id)
    2.看有没有和兄弟重复
    3.有重复校验不通过  没有重复 校验通过  */
    const validateName = (rule, value, callback) => {
      // console.log('this.depts', this.depts) //列表数据
      // console.log('this.nodeData', this.nodeData) //父亲数据
      // 编辑时 允许用户输入的值value和原本的编码nodeData.name一致放行
      if (this.form.id && this.nodeData.name === value) {
        callback()
        return
      }
      let arr = []
      // 编辑 筛选出 父级同级部门的兄弟
      if (this.form.id) {
        arr = this.depts.filter(item => item.pid === this.nodeData.pid)
        console.log('arr', arr)
      } else {
        // 新增，是用部门的孩子们做比较 ， 筛选出父亲的孩子们 我的兄弟们  子的pid就是父的id
        arr = this.depts.filter(item => item.pid === this.nodeData.id)
      }

      // 找出每项item中的名字是否和用户输入的值重复
      const isRepeat = arr.some(item => item.name === value)
      isRepeat ? callback(new Error(`同级部门名称${value}重复了`)) : callback()
    }

    /*
    编辑部门名称的校验
    之前新增，是用部门的孩子们做比较
    现在编辑·是用部门的同级兄弟做比较
    */
    return {
      options: [],
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      // 定义校验规则
      rules: {
        name: [
          {
            required: true,
            message: '部门名称不能为空',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 50,
            message: '部门名称要求1-50个字符',
            trigger: ['blur', 'change']
          },
          { validator: validateName, trigger: 'blur' }
        ],
        code: [
          {
            required: true,
            message: '部门编码不能为空',
            trigger: ['blur', 'change']
          },
          { validator: validateCode, trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '部门编码要求1-50个字符',
            trigger: ['blur', 'change']
          }
        ],
        manager: [
          {
            required: true,
            message: '部门负责人不能为空',
            trigger: ['blur', 'change']
          }
        ],
        introduce: [
          {
            required: true,
            message: '部门介绍不能为空',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 300,
            message: '部门介绍要求1-300个字符',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  // 计算属性 控制标题
  computed: {
    showTitle() {
      // 有id代表是编辑部门 没有id代表是新增部门
      return this.form.id ? '编辑部门' : '新增部门'
    }
  },
  async created() {
    this.getEmployeesList()
  },
  methods: {
    // 获取员工列表
    async getEmployeesList() {
      const { data } = await reqGetEmployeeSimple()
      // console.log('员工列表', data)
      this.options = data
    },
    // 1.获取员工详情(实现数据回显) -父组件调用并传递nodeData.id
    // async getDepartDetail(id) {
    //   const { data } = await reqGetDepartDetail(id)
    // console.log('员工详情', data)
    //   this.form = { ...data } // 数据赋值 实现数据回显
    // },
    // 2.获取员工详情(实现数据回显) - 子组件直接传递id-dom更新异步-父组件调用需使用$nextTick
    async getDepartDetail(id) {
      const { data } = await reqGetDepartDetail(this.nodeData.id)
      // console.log('员工详情', data)
      this.form = { ...data } // 数据赋值 实现数据回显
    },
    // 弹窗关闭/清空
    handleCloseDialog() {
      // this.$emit('close-dialog', false) // 关闭事件，通知父亲关闭弹窗
      this.$emit('update:showDialog', false) // 关闭事件，通知父亲关闭弹窗
      // 手动清空form  否则里面会有id会影响计算属性控制标题的添加部门标题为编辑部门标题
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
      this.$refs.form.resetFields() // 清空表单
    },
    // 添加
    async submit() {
      await this.$refs.form.validate()
      // console.log('ok')
      // 有id 调用编辑 没有id就是新增
      if (this.form.id) {
        await reqPutDepartDetail(this.form)
      } else {
        await reqAdddepartMents({ ...this.form, pid: this.nodeData.id }) // 父级nodeData.id
      }
      this.$message.success(`${this.showTitle}成功`) // 提示
      this.$emit('add') // 子传父 让父亲渲染列表
      this.handleCloseDialog() // 调用方法关闭弹窗
    }
  }
}
</script>
